// 阶段2

import React from 'react';
import { Form, Row, Col, Input, DatePicker, Select, InputNumber } from 'antd';
import { observer } from 'mobx-react-lite';
import { FileUploader } from '~/components/FileUploader';
import { genValidConfig } from '~/pages/project/new/pageConfig';
import '../index.local.sass';

const formItemLayout = {
  wrapperCol: { span: 20 },
};

const { Option } = Select;

export const StageTwo = observer(() => {
  const fileUploadOptions = {
    accept: 'application/zip,application/vnd.rar,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf',
    max: 1,
  };
  return (
    <div className="stage2">
      <h3><i></i>Tendering</h3>
      <Row gutter={24} className="mb-4">
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Pre-qualification announcement'}
              name="preQualificationAnnouncement"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Shortlist of pre-qualified bidders'}
              name="preQualifiedShortlist"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Request for proposal'}
              name="rfp"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>

      <Row gutter={24} className="mb-4">
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'List of the bidders submitting proposals'}
              name="bidderList"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Bids evaluation result'}
              name="bidsEvaluationResult"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Tender proposal submission deadline'}
            name="tenderSubmissionDeadline"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Select Time"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Final negotiation date'}
            name="finalNegotiationDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Select Time"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Winning bidder(s)'}
            name="winningBidder"
            rules={genValidConfig('Winning bidder(s)')}
            {...formItemLayout}
          >
            <Input placeholder="Please input"/>
          </Form.Item>
        </Col>
      </Row>

      <h3><i></i>Contract Execution</h3>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Whether the government approves the PPP contract to be signed'}
            name="governmentApprovesStatus"
            rules={genValidConfig({ type: 'number' })}
            {...formItemLayout}
          >
            <Select placeholder="Please select">
              <Option value={0}>no</Option>
              <Option value={1}>yes</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'According to the signed PPP project contract, the agreed investment amount of the project'}
            name="contractAgreedInvestmentAmount"
            {...formItemLayout}
          >
            <InputNumber size='middle'></InputNumber>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={'The agreed government investment and expenditures that need to be arranged from government budget'}
            name="contractBudgetExpenditure"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" prefix="$"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'the agreed private investment amount of the project'}
            name="privateAgreedInvestmentAmount"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" prefix="$"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Contract signing date'}
            name="contractSigningDate"
            rules={genValidConfig('Contract signing date')}
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Select Time"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Approval date'}
            name="approvalDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Select Time"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'The signed PPP project contract'}
              name="theSignedContract"
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Core terms of the signed PPP project contract'}
              name="contractCoreTerms"
              rules={genValidConfig({ type: 'array' })}
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>

    </div>
  );
});
